import React, { useEffect, useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';
// import { useLocation } from 'react-router-dom';
import { Button, Card, Form, Input, Space, Typography } from 'antd';
const App = () => {
    const [arr, setArr] = useState(null)



    useEffect(() => {
        console.log(arr, 'arr')
    }, [arr])



    const [form] = Form.useForm();
    const onFinish = (values) => {
        setArr(values)
        console.log('提交', values);
        form.resetFields();
        // 重置表单内容

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (

        <div>

            <Form
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 18,
                }}
                form={form}
                name="dynamic_form_complex"
                style={{
                    maxWidth: 600,
                }}
                autoComplete="off"
                initialValues={{
                    items: [{}],
                }}
            >
                <Form.List name="items">
                    {(fields, { add, remove }) => (
                        <div
                            style={{
                                display: 'flex',
                                rowGap: 16,
                                flexDirection: 'column',
                            }}
                        >
                            {fields.map((field) => (
                                <Card
                                    size="small"
                                    title={`Item ${field.name + 1}`}
                                    key={field.key}
                                    extra={
                                        <CloseOutlined
                                            onClick={() => {
                                                remove(field.name);
                                            }}
                                        />
                                    }
                                >
                                    <Form.Item label="Name" name={[field.name, 'name']}
                                        rules={[
                                            {
                                                required: true,
                                                message: 'Please input your username!',
                                            },
                                        ]}>
                                        <Input />
                                    </Form.Item>

                                    {/* Nest Form.List */}
                                    <Form.Item label="List">
                                        <Form.List name={[field.name, 'list']}>
                                            {(subFields, subOpt) => (
                                                <div
                                                    style={{
                                                        display: 'flex',
                                                        flexDirection: 'column',
                                                        rowGap: 16,
                                                    }}
                                                >
                                                    {subFields.map((subField) => (
                                                        <Space key={subField.key}>
                                                            <Form.Item noStyle name={[subField.name, 'first']}
                                                                rules={[
                                                                    {
                                                                        required: true,
                                                                        message: 'Please input your first!',
                                                                    },
                                                                ]}
                                                            >
                                                                <Input placeholder="first" />
                                                            </Form.Item>
                                                            <Form.Item noStyle name={[subField.name, 'second']}
                                                                rules={[
                                                                    {
                                                                        required: true,
                                                                        message: 'Please input your second!',
                                                                    },
                                                                ]}
                                                            >
                                                                <Input placeholder="second" />
                                                            </Form.Item>
                                                            <CloseOutlined
                                                                onClick={() => {
                                                                    subOpt.remove(subField.name);
                                                                }}
                                                            />
                                                        </Space>
                                                    ))}
                                                    <Button type="dashed" onClick={() => subOpt.add()} block>
                                                        + Add Sub Item
                                                    </Button>
                                                </div>
                                            )}
                                        </Form.List>
                                    </Form.Item>
                                </Card>
                            ))}

                            <Button type="dashed" onClick={() => add()} block>
                                + Add Item
                            </Button>
                        </div>
                    )}
                </Form.List>

                <Form.Item noStyle shouldUpdate>
                    {() => (
                        <Typography>
                            <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
                        </Typography>
                    )}
                </Form.Item>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>

            </Form>

        </div>
    );
};
export default App;